<template>
	<div class='project-import-info'>
		<el-form label-width="80px">
			<h2 class="center">审核信息</h2>
			<el-form-item label="项目状态">
				<el-tag
					v-if="project.passed"
					type="success"
				>
					已通过
				</el-tag>
				<el-tag
					v-else
					type="warning"
				>
					未通过
				</el-tag>
			</el-form-item>
			<el-form-item
				class="check"
				label="审核"
			>
				<div class="btns">
					<el-button
						type="success"
						icon="el-icon-check"
						size="small"
						@click="openCheckProject(true)"
					>
						通过
					</el-button>
					<el-button
						icon="el-icon-close"
						size="small"
						@click="openCheckProject(false)"
					>
						拒绝
					</el-button>
					<el-button
						icon="el-icon-delete"
						size="small"
						type="danger"
						@click="deleteProject()"
					>
						删除项目
					</el-button>
				</div>
			</el-form-item>
		</el-form>
		<!-- 审核项目，输入邮件内容 -->
		<SendInform
			v-if="inform.showSendModel"
			header="审核结果"
			:receiver="inform.receiver"
			:inform="inform.inform"
			@close="inform.showSendModel=false"
			@success="successSendInform"
		/>
	</div>
</template>

<script>
import {
  checkCourseDesign,
  removeCourseDesign
} from '@project/api/course'
export default {
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      inform: { // 通知弹窗内容
        header: '',
        receiver: null,
        inform: null,
        showSendModel: false,
        val: null
      },
    }
  },
  methods: {
    /**
		 * 点击审核项目按键，调出发送通知按键
		 */
    openCheckProject(bool) {
      /* 设置通知内容 */
      if (bool) {
        this.inform.header = '项目审核结果通知'
        this.inform.inform = {
          title: '项目审核 - 通过',
          content: `恭喜你,你的项目{{${ this.project.name }}}成功通过审核！`
        }
      } else {
        this.inform.inform = {
          title: '项目审核 - 未通过',
          content: `很遗憾的告诉你,你的项目{{${ this.project.name }}}未成功通过审核,原因如下:`
        }
      }

      this.inform.receiver = {
        id: this.project.creatorUser.userId,
        name: this.project.creatorUser.nickname
      }
      this.inform.val = bool
      this.inform.showSendModel = true
    },
    /**
		 * 成功发送邮件，根据type调用回调
		 */
    successSendInform() {
      this.check(this.inform.val)
      this.inform = {
        header: '',
        receiver: null,
        inform: null,
        showSendModel: false,
        type: 0,
        val: null
      }
    },
    /* 审核项目 */
    async check(val) {
      val = Number(val)
      this.$loading()
      try {
        await checkCourseDesign({
          courseDesignId: this.project.id,
          pass: val,
        })

        if (val) {
          this.$success('已通过该项目')
        } else {
          this.$warn('已拒绝')
        }

        this.$emit('updateProject', {
          ...this.project,
          passed: val,
        })
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /* 删除项目 */
    deleteProject() {
      this.$confirm('确认删除该项目？请谨慎操作！！', () => {
        this.$confirm('即将删除该项目请确认！', async() => {
          this.$loading()
          try {
            await removeCourseDesign(this.project.id)
            this.$warn('项目已删除')
            this.$router.push('/admin/projects')
          } catch (err) {
            console.log(err)
          }
          this.$hideLoading()
        })
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.project-import-info .el-form {
  height: 100%;

  .meaning {
    width: 200px;
  }

  .check {
    .el-button {
      margin: 0 15px 0 0;
    }
  }
}
</style>
